<%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2022/8/28
  Time: 18:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>顾客注册页</title>
    <link rel="stylesheet" href="css/zyregister.css">
</head>
<style>
    #file{display: none;}
</style>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>



<body>

<div class="login-box">
    <h1>欢迎注册饿了否！</h1>
    <form action="customer/register">
        <div class="input-box">

            <div class="input-textname">
                <label for="name">用户名:&nbsp;</label>
                <input type="text"  placeholder="您的用户名" name="cusername" id="name" >
            </div>

            <div class="input-textpass">
                <label for="password">密&nbsp;&nbsp;&nbsp;码:&nbsp; </label>
                <input type="password" placeholder="您的密码" name="cpass" id="password">
            </div>

            <div class="input-textaddres">
                <label for="address">居住地址:&nbsp; </label>
                <input type="text" placeholder="您的地址" name="caddress" id="address">
            </div>

            <div class="input-textphone">
                <label for="phone">联系方式:&nbsp; </label>
                <input type="text" placeholder="您的联系方式" name="cphone" id="phone">
            </div>

            <div class="imagepart">

                <input type="file"  id="file" name="file" onchange="showImg(this)">
                <div>
                    <span>头像:</span>
                    <img id="image" width="35" height="35">
                    <img  width="30" height="30" style="cursor: pointer;" src="images/添加.png" onclick="document.getElementById('file').click()">
                    <span id="filename">请点击左侧选择</span>
                </div>


            </div>
            <button class="input-btn" type="submit">
                注册
            </button>
            <div class="sign-up">
                已有账号？<a href="customerlogin.jsp">点击去登录</a>
            </div>
        </div>
    </form>
</div>

</div>


</form>
</body>

<script type="text/javascript">
    $('#file').change(function() {
        // 获取选择文件输入的路径value
        var filePath = $(this).val();

        if (filePath == '') {
            alert('你还没选择文件！');
            $('#filename').html('请点击左侧选择头像'); // 未选择文件
            return;
        }
        var arr = filePath.split("\\"); // 将路径以‘\’进行分割
        var fileName = arr[arr.length - 1]; // 最后一个数组元素即为文件名+后缀
        $('#filename').html(fileName);  // 选中了文件，显示文件名

    })

    function  showImg(cell){
        document.getElementById('image').src=window.URL.createObjectURL(cell.files[0])
    }
</script>
</html>
